<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>关于我</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>

<!--导航-->
<nav th:replace="_fragments :: menu(5)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui teal header item">Blog</h2>
      <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
      <a href="#" class=" m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
      <a href="#" class="active m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
      <div class="right m-item item m-mobile-hide">
        <div class="ui icon inverted transparent input m-margin-tb-tiny">
          <input type="text" placeholder="Search....">
          <i class="search link icon"></i>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<!--中间内容-->
<div class=" m-padded-tb-large  ">
  <div class="ui container">
    <div class="ui stackable grid ">
      <div class="ten wide column">
        <img src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&w=600"  alt="" class="ui rounded image">
      </div>
      <div class="six wide column">
        <div class="ui top attached segment">
          <div class="ui header">关于我</div>
        </div>
        <div class="ui attached segment">
          <p class="m-text">我到底喜欢什么
            喜欢明媚的蓝天和娇艳的花
            喜欢浪漫的冬雪
            喜欢平淡的人生和我
            尽管有时候不如意
            尽管有时候会内耗
            但世界何其大，我在茫茫世界找寻我存在的意义
            就像花终会枯，我终会老，所以还是抓紧爱自己</p>
        </div>
        <div class="ui attached segment">
          <div class="ui orange basic left pointing label">编程</div>
          <div class="ui orange basic left pointing label">音乐</div>
          <div class="ui orange basic left pointing label">绘画</div>
          <div class="ui orange basic left pointing label">写作</div>
          <div class="ui orange basic left pointing label">运动</div>
        </div>
        <div class="ui attached segment">
          <div class="ui teal basic left pointing label m-margin-tb-tiny">编程</div>
          <div class="ui teal basic left pointing label m-margin-tb-tiny">音乐</div>
          <div class="ui teal basic left pointing label m-margin-tb-tiny">绘画</div>
          <div class="ui teal basic left pointing label m-margin-tb-tiny">写作</div>
          <div class="ui teal basic left pointing label m-margin-tb-tiny">运动</div>
        </div>
    
        <div class="ui bottom attached segment">
          <a href="#" class="ui circular icon  button"><i class="github icon"></i></a>
          <a href="#" class="ui wechat circular icon  button"><i class="wechat icon"></i></a>
          <a href="#" class="ui qq circular icon  button" data-content="1810393156" data-position="bottom center"><i class="qq icon"></i></a>
        </div>
        <div class="ui wechat-qr flowing popup transition hidden">
          <img src="../static/image/微信.jpg" alt="" class="ui rounded image" style="width: 100px">
        </div>
      </div>
    </div>
  </div>
</div>

<!--底部footer-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  <div class="ui center aligned container">
    <div class="ui inverted divided grid">
      <div class="three wide column">
        <div class="ui inverted link list">
          <div class="item">
            <img src="../static/image/微信.jpg" class="ui rounder image" alt="" style="width: 110px">
          </div>
        </div>
      </div>
      <div class="three wide column" >
        <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
        <div id="newblog-container">
          <div class="ui inverted link list" th:fragment="newblogList">
            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item m-text-thin" th:each="blog : ${newblogs}" th:text="${blog.title}">用户故事（User Story）</a>
            <!--/*-->
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <!--*/-->
          </div>
        </div>
      </div>
      <div class="four wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
        <div class="ui inverted link list">
          <a href="#" class="item">Email:1810393156@qq.com</a>
          <a href="#" class="item">QQ:1810393156</a>
        </div>
      </div>
      <div class="five wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced ">个人介绍</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini">河南中医药大学，考研女一枚</p>
      </div>
    </div>
    <div class="ui inverted section divider"></div>  <!-分割线->
    <p class="m-text-thin m-text-spaced m-opacity-mini">栀子比众木 人间诚未多</p>
  </div>

</footer>

<script src="http://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>


<!--手机端菜单按钮显示菜单事件-->
<script>
  $('.menu.toggle').click(function (){
    $('.m-item').toggleClass('m-mobile-hide');
  });
  $('.wechat').popup({
    popup:$('.wechat-qr'),
    position:'bottom center'
  });
  $('.qq').popup();

</script>



</body>
</html>